<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>意见反馈</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />

</head>
<style>
    body {
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        background-color: #FCF8F5;
        background: white;
    }
    .bootstrap-table{
        height:100% !important;
    }
    .fixed-table-container{
        height:calc(100% - 115px) !important;
    }
    .form-title {
        height: 40px;
        text-align: right;
    }
    .checkHead table .form-value input{
        height: 34px;
        width: 200px;
    }
    #record-table tr td {
        vertical-align: inherit;
    !important;
    }
    .delete_a{
        cursor: pointer;
    }
    .form-title1{
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: right;
    }
    .img_box{
        margin-right: 10px;
        float: left;
        width: 200px;
        height: 200px;
    }
    .img_box img{
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div id="content">
    <!--搜索-->
    <div class="checkHead" id="checkHead" style="padding-top: 10px;padding-bottom: 5px;" >
        <table class="checkHead-table" style="/*margin-left: calc(100% - 400px)*/">
            <tr>
                <td class="form-title">
                    搜索：
                </td>
                <td class="form-value">
                    <input v-model="tel" type="text" class="search" placeholder="请输入联系电话搜索" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td>
                    <button class="btn btn-default" v-on:click="searchs()">
                        <i class="icon-refresh align-top bigger-125"></i>
                        查询
                    </button>
                    <button class="btn btn-default" v-on:click = "reset">
                        <i class="icon-reply align-top bigger-125"></i>
                        重置
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog"  >
            <div class="modal-content" style="width: 850px;height: 600px;">
                <div class="modal-header" style="width:100%;height: 50px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">意见反馈详情:</h4>
                </div>
                <div class="modal-body" style="overflow: auto; width: 100%;height: 485px;">
                        <table class="table">
                            <tr>
                                <td class="form-title1">
                                    意见建议内容：
                                </td>
                                <td class="form-value">
                                    <!--<input class="form-control" readonly="readonly" type="text" class="search" />-->
                                    <textarea name="" class="form-control" id="" cols="30" rows="7" readonly="readonly">{{result.suggestion_content}}</textarea>
                                </td>
                            </tr>
                            <tr>
                                <td class="form-title1">
                                    联系电话：
                                </td>
                                <td class="form-value">
                                    <input v-model="result.tel" class="form-control" readonly="readonly" type="text" class="search" />
                                </td>
                            </tr>
                            <tr>
                                <td class="form-title1">
                                    类型：
                                </td>
                                <td class="form-value">
                                    <input v-model="result.type" class="form-control" readonly="readonly" type="text" class="search" />
                                </td>
                            </tr>
                            <tr>
                                <td class="form-title1">
                                    图片：
                                </td>
                                <td class="form-value" >
                                    <div class="img_box" v-for="value in result.image_info">
                                        <img :src="src+value.image_url" alt="" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                </div>
                <div class="modal-footer" style="width:100%;height: 65px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="table-responsive" style="height:100%;background:white;margin-top: 0px;">
    <table class="table" id="record-table"></table>
</div>
</body>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<script>

    var tel;

    var tableheight = document.documentElement.clientHeight - 150;
    $('#record-table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Sundry/getSuggestionList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'center',
                title: '序号'
            }, {
                field: 'suggestion_content',
                align: 'center',
                width:"30%",
                title: '内容'
            },{
                field: 'tel',
                align: 'center',
                title: '联系电话'
            },
            {
                field: 'create_time',
                align: 'center',
                title: '时间'
            },{
                field: 'type',
                align: 'center',
                title: '类型'
            }, {
                title: '操作',
                align: 'center',
                width: 260,
                formatter: operateFormatter
            }
        ],

        queryParams: function (params) {
            var param = {
                tel:tel,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });

    var vm = new Vue({
        el:"#content",
        data:{
            tel:"",
            result:{},
            src :oss_url
        },
        methods:{
            searchs:function(){
                tel = vm.tel;
                $( "#record-table" ).bootstrapTable( 'refresh' );
            },
            reset:function(){
                vm.tel = "";
            },
            details : function (id) {
                var url = "{:url('admin/Sundry/getSuggestionInfo')}";
                this.$http.post(url,{
                    "id":id
                }).then(function (data) {
                    this.result = data.body.data;
                })
            },
            refresh : function () {
                this.tel = '';
            }
        }
    });


    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0)' class='delete_a' onclick='details(1," + row.id + ")'>查看详情</a>";
        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }

    function details(index , id) {
        $('#exampleModal').modal({
            keyboard: true
        });
        vm.details(id);
    }
</script>
</html>